{% block sw_customer_detail_addresses %}
<div class="sw-customer-detail-addresses">

    {% block sw_customer_detail_addresses_card %}
    <mt-card
        position-identifier="sw-customer-detail-addresses"
        :is-loading="isLoading"
        :large="true"
    >
        {% block sw_customer_detail_addresses_toolbar %}
        <template #toolbar>
            <sw-card-filter
                placeholder=""
                @sw-card-filter-term-change="onChange"
            >
                <template #filter>
                    {% block sw_customer_detail_addresses_add_button %}
                    <mt-button
                        class="sw-customer-detail-addresses__add-address-action"
                        :disabled="!customerEditMode"
                        size="small"
                        variant="secondary"
                        @click="onCreateNewAddress"
                    >
                        <mt-icon
                            name="regular-plus-circle-s"
                            size="16px"
                        />
                        {{ $tc('sw-customer.detailAddresses.buttonAddAddress') }}
                    </mt-button>
                    {% endblock %}
                </template>
            </sw-card-filter>
        </template>
        {% endblock %}

        {% block sw_customer_detail_addresses_add_modal %}
        <sw-modal
            v-if="currentAddress"
            :title="$tc('sw-customer.detailAddresses.modalTitleAddress')"
            @modal-close="onCloseAddressModal"
        >

            {% block sw_customer_detail_addresses_add_modal_address_form %}
            <sw-customer-address-form
                :address="currentAddress"
                :customer="activeCustomer"
            >

                <sw-customer-address-form-options
                    :address="currentAddress"
                    :customer="activeCustomer"
                    :custom-field-sets="customerAddressCustomFieldSets"
                    @default-address-change="onChangeDefaultAddress"
                />

            </sw-customer-address-form>
            {% endblock %}

            {% block sw_customer_detail_addresses_add_modal_footer %}
            <template #modal-footer>
                {% block sw_customer_detail_addresses_add_modal_cancel %}
                <mt-button
                    size="small"
                    variant="secondary"
                    @click="onCloseAddressModal"
                >
                    {{ $tc('global.default.cancel') }}
                </mt-button>
                {% endblock %}

                {% block sw_customer_detail_addresses_add_modal_apply %}
                <mt-button
                    variant="primary"
                    size="small"
                    @click="onSaveAddress"
                >
                    {{ $tc('global.default.apply') }}
                </mt-button>
                {% endblock %}
            </template>
            {% endblock %}
        </sw-modal>
        {% endblock %}

        {% block sw_customer_detail_addresses_grid %}
        <template #grid>
            <sw-one-to-many-grid
                ref="addressGrid"
                :collection="sortedAddresses"
                :local-mode="false"
                :columns="addressColumns"
                :show-selection="false"
                :sort-direction="addressSortDirection"
                :sort-by="addressSortProperty"
                :is-loading="isLoading"
                @column-sort="setAddressSorting"
            >
                {% block sw_customer_detail_addresses_grid_columns %}
                {% block sw_customer_detail_addresses_grid_columns_default_shipping_address %}
                <template #column-defaultShippingAddress="{ item }">
                    <sw-radio-field
                        v-model:value="activeCustomer.defaultShippingAddressId"
                        :disabled="!customerEditMode"
                        name="defaultShippingAddress"
                        :options="[{ value: item.id }]"
                        @update:value="onChangeDefaultShippingAddress"
                    />
                </template>
                {% endblock %}

                {% block sw_customer_detail_addresses_grid_columns_default_billing_address %}
                <template #column-defaultBillingAddress="{ item }">
                    <sw-radio-field
                        v-model:value="activeCustomer.defaultBillingAddressId"
                        :disabled="!customerEditMode"
                        name="defaultBillingAddress"
                        :options="[{ value: item.id }]"
                        @update:value="onChangeDefaultBillingAddress"
                    />
                </template>
                {% endblock %}

                {% block sw_customer_detail_addresses_grid_columns_last_name %}
                <template #column-lastName="{ item }">
                    <a
                        v-if="customerEditMode"
                        role="link"
                        tabindex="0"
                        @click="onEditAddress(item.id)"
                        @keydown.enter="onEditAddress(item.id)"
                    >
                        {{ item.lastName }}
                    </a>

                    <template v-else>
                        {{ item.lastName }}
                    </template>
                </template>
                {% endblock %}
                {% endblock %}

                {% block sw_customer_detail_addresses_grid_columns_actions %}
                <template #actions="{ item }">

                    {% block sw_customer_detail_addresses_grid_columns_actions_edit %}
                    <sw-context-menu-item
                        :disabled="!customerEditMode"
                        @click="onEditAddress(item.id)"
                    >
                        {{ $tc('sw-customer.detailAddresses.contextMenuEdit') }}
                    </sw-context-menu-item>
                    {% endblock %}

                    {% block sw_customer_detail_addresses_grid_columns_actions_duplicate %}
                    <sw-context-menu-item
                        :disabled="!customerEditMode"
                        @click="onDuplicateAddress(item.id)"
                    >
                        {{ $tc('sw-customer.detailAddresses.contextMenuDuplicate') }}
                    </sw-context-menu-item>
                    {% endblock %}

                    {% block sw_customer_detail_addresses_grid_columns_actions_defaultShippingAddress %}
                    <sw-context-menu-item
                        :disabled="!customerEditMode"
                        @click="onChangeDefaultShippingAddress(item.id)"
                    >
                        {{ $tc('sw-customer.detailAddresses.contextMenuDefaultShippingAddress') }}
                    </sw-context-menu-item>
                    {% endblock %}

                    {% block sw_customer_detail_addresses_grid_columns_actions_defaultBillingAddress %}
                    <sw-context-menu-item
                        :disabled="!customerEditMode"
                        @click="onChangeDefaultBillingAddress(item.id)"
                    >
                        {{ $tc('sw-customer.detailAddresses.contextMenuDefaultBillingAddress') }}
                    </sw-context-menu-item>
                    {% endblock %}

                    {% block sw_customer_detail_addresses_grid_columns_actions_delete %}
                    <sw-context-menu-item
                        variant="danger"
                        :disabled="!customerEditMode || isDefaultAddress(item.id)"
                        @click="onDeleteAddress(item.id)"
                    >
                        {{ $tc('sw-customer.detailAddresses.contextMenuDelete') }}
                    </sw-context-menu-item>
                    {% endblock %}
                </template>
                {% endblock %}

                {% block sw_customer_detail_addresses_grid_columns_action_modals %}
                <template #action-modals="{ item }">
                    {% block sw_customer_detail_addresses_delete_modal %}
                    <sw-modal
                        v-if="showDeleteAddressModal === item.id"
                        :title="$tc('global.default.warning')"
                        variant="small"
                        @modal-close="onCloseDeleteAddressModal"
                    >
                        {% block sw_customer_detail_addresses_delete_modal_confirm_delete_text %}
                        <p class="sw-customer-detail-addresses__confirm-delete-text">
                            {{ $tc('sw-customer.detailAddresses.textDeleteAddressConfirm') }}
                        </p>
                        {% endblock %}

                        {% block sw_customer_detail_addresses_delete_modal_address_item %}
                        <sw-address
                            class="sw-customer-detail-addresses__confirm-delete-address"
                            :address="item"
                        />
                        {% endblock %}

                        {% block sw_customer_detail_addresses_delete_modal_footer %}
                        <template #modal-footer>
                            {% block sw_customer_detail_addresses_delete_modal_cancel %}
                            <mt-button
                                size="small"
                                variant="secondary"
                                @click="onCloseDeleteAddressModal"
                            >
                                {{ $tc('global.default.cancel') }}
                            </mt-button>
                            {% endblock %}

                            {% block sw_customer_detail_addresses_delete_modal_confirm %}
                            <mt-button
                                variant="critical"
                                size="small"
                                @click="onConfirmDeleteAddress(item.id)"
                            >
                                {{ $tc('sw-customer.detailAddresses.buttonDelete') }}
                            </mt-button>
                            {% endblock %}
                        </template>
                        {% endblock %}
                    </sw-modal>
                    {% endblock %}
                </template>
                {% endblock %}
            </sw-one-to-many-grid>
        </template>
        {% endblock %}
    </mt-card>
    {% endblock %}
</div>
{% endblock %}
